<template>
    <eui-page>
        <eui-page-content>
            <eui-base-card title="基本用法" titleLine=true>
                <eui-base-card title="标题" titleLine=true>
                    <eui-detail-show :items="dataItems" v-model="saleData"></eui-detail-show>
                </eui-base-card>
            </eui-base-card>

            <eui-base-card title="无标题" titleLine=true>
                <eui-base-card titleLine=true>
                    <eui-detail-show :items="dataItems" v-model="saleData"></eui-detail-show>
                </eui-base-card>
            </eui-base-card>

            <eui-base-card title="Click 事件">
                <eui-base-card @click="handleClick">
                    <eui-detail-show :items="dataItems" v-model="saleData"></eui-detail-show>
                </eui-base-card>
            </eui-base-card>

            <eui-section title="显示复选框" type="line">
                <eui-base-card v-for="(item, index) in saleDatas" :checkable="true" @check="leftChecked(item)"
                    @click="leftChecked(item)" :checked="item.checked">
                    <template #left>
                    </template>
                    <eui-detail-show :items="dataItems" v-model="saleDatas[index]"></eui-detail-show>
                </eui-base-card>
            </eui-section>

            <eui-section title="自定义插槽标题右侧" type="line">
                <eui-base-card v-for="(item, index) in saleDatas" :key="index" :title="item.c_gname">
                    <template #right>
                        <eui-tag :text="item.status" plain plainFill> </eui-tag>
                    </template>
                    <eui-detail-show :items="dataItems" v-model="saleDatas[index]"></eui-detail-show>
                </eui-base-card>
            </eui-section>

            <eui-section title="自定义插槽左侧" type="line">
                <eui-base-card v-for="(item, index) in saleDatas" :key="index" :title="item.c_gname">
                    <eui-detail-show :items="dataItems" v-model="saleDatas[index]"></eui-detail-show>
                    <template #left>
                        <view class="e-attachment">
                            <image class="e-attachment__image" :src="item.cover" mode="aspectFill" />
                        </view>
                    </template>
                    <template #right>
                        <eui-tag :text="item.status" plain plainFill> </eui-tag>
                    </template>
                </eui-base-card>
            </eui-section>

            <eui-section title="自定义插槽底部" type="line">
                <eui-base-card v-for="(item, index) in saleDatas" :key="index" :title="item.c_gname"
                    :bottomShow="showBottom">
                    <eui-detail-show :items="dataItems" v-model="saleDatas[index]"></eui-detail-show>
                    <eui-button type="min" title="展开卡片" @buttonClick="clickbtn"></eui-button>
                    <template #bottom>
                        <view class="e-attachment">
                            <image class="e-attachment__image" :src="item.cover" mode="aspectFill" />
                        </view>
                    </template>

                </eui-base-card>
            </eui-section>

        </eui-page-content>
    </eui-page>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const saleData = ref({
    c_au_dt: "2022-01-01",
    c_gname: "商品名称1",
    c_deduct_rate: 10,
    c_sale_amt: 100,
    c_sale_qty: 10,
    c_sale_unit_price: 10,
    checked: false
});

const saleDatas = ref([{
    c_au_dt: "2022-01-01",
    c_gname: "商品名称商品名称商品名称商品名称1",
    c_deduct_rate: 10,
    c_sale_amt: 100,
    c_sale_qty: 10,
    c_sale_unit_price: 10,
    checked: false,
    status: "已完成了",
    cover: "../../../../static/logo.png"
}, {
    c_au_dt: "2022-01-02",
    c_gname: "商品名称2",
    c_deduct_rate: 9,
    c_sale_amt: 200,
    c_sale_qty: 20,
    c_sale_unit_price: 8,
    checked: false,
    status: "进行中",
    cover: "../../../../static/logo.png"
}]);

const dataItems = [
    {
        label: "销售日期",
        prop: "c_au_dt",
        type: "text",
        element: {
            mode: "YYYY-MM-DD",
        },
    },
    {
        label: "商品",
        prop: "c_gname",
        type: "text",
        element: {
        },
    },
    {
        label: "扣率",
        prop: "c_deduct_rate",
        type: "text",
        element: {
            precision: 2,
        },
    },
    {
        label: "销售金额",
        prop: "c_sale_amt",
        type: "text",
        element: {
            precision: 2,
        },
    },
    {
        label: "销售数量",
        prop: "c_sale_qty",
        type: "text",
        element: {
            precision: 0
        },
    },
    {
        label: "销售单价",
        prop: "c_sale_unit_price",
        type: "text",
        element: {
            precision: 2,
        },
    }
]

const handleClick = () => {
    alert("点击了");
}

const showBottom = ref<boolean>(false);

const clickbtn = () => {
    console.log('点击了clickbtn')
    showBottom.value = showBottom.value ? false : true
}

const leftChecked = (item) => {
    if (item) {
        item.checked = !item.checked;
    }
}
</script>

<route lang="json">{
    "style": {
        "navigationBarTitleText": "BaseCard"
    }
}</route>

<style lang="scss">
.e-attachment {
    align-items: center;
    justify-content: center;
    display: flex;

    &__image {
        width: 115px;
        height: 115px;
        margin: 6px 6px;
        border-radius: 5px;
    }
}
</style>
